<template>
	<div class="tele_wrapper">
		<div class="remark_details">
			<div v-if="replyList.fullName">
				<div class="shenfen_pass clearfix">
					<span class="company_name">{{replyList.fullName}}</span>
					<span class="enter_name">{{replyList.entryTime}}-{{replyList.resignedTime?replyList.resignedTime:'至今'}}</span>
				</div>
			</div>
			
			<div v-if="!showmoreList" class="remark_wrapper">
				<!--当前公司单条评论-->
				<div class="remark_content" v-if="replyList.length>0 && replyList.currentCompanyComment">
					<div class="remark_info">
						<div class="remark_info_left">
							<img :src="replyList.currentCompanyComment[0].facePhoto"/>
						</div>
						<div class="remark_info_content">
							<div class="remark_info_name">{{replyList.currentCompanyComment[0].realName}}</div>
							<div class="remark_info_position">{{replyList.currentCompanyComment[0].position}}</div>
						</div>
						<div class="remark_info_right">{{replyList.currentCompanyComment[0].createTime}}</div>
					</div>
					<div class="comp_remark">
						<span class="comp_remark_head">{{replyList.currentCompanyComment[0].content}}</span>	
						<div v-if="replyList.currentCompanyComment[0].childCommentInfoList">
							<div class="comp_chat" v-for="huifu in replyList.currentCompanyComment[0].childCommentInfoList">
								<div class="comp_chat_info clearfix">
									<span class="comp_chat_infor">{{huifu.replyPerson}}</span>
									<span class="comp_chat_infol">{{huifu.returnedPerson}}</span>
									<span class="comp_chat_infoc">回复</span>
									<span class="comp_chat_infol">{{huifu.createTime}}</span>
								</div>
								<div class="comp_chat_content">{{huifu.content}}</div>
							</div>
						</div>
					</div>
				</div>
				<!--其他公司单条评论-->
				
				<div class="remark_content" v-if="replyList.length>0 && replyList.otherCompanyComment">
					<div class="remark_info">
						<div class="remark_info_left">
							<img :src="replyList.otherCompanyComment[0].facePhoto"/>
						</div>
						<div class="remark_info_content">
							<div class="remark_info_name">{{replyList.otherCompanyComment[0].realName}}</div>
							<div class="remark_info_position">{{replyList.otherCompanyComment[0].position}}</div>
						</div>
						<div class="remark_info_right">{{replyList.otherCompanyComment[0].createTime}}</div>
					</div>
					<div class="comp_remark">
						<span class="comp_remark_head">{{replyList.otherCompanyComment[0].content}}</span>	
						<div v-if="replyList.otherCompanyComment[0].childCommentInfoList">
							<div class="comp_chat" v-for="huifu in replyList.otherCompanyComment[0].childCommentInfoList">
								<div class="comp_chat_info clearfix">
									<span class="comp_chat_infor">{{huifu.replyPerson}}</span>
									<span class="comp_chat_infol">{{huifu.returnedPerson}}</span>
									<span class="comp_chat_infoc">回复</span>
									<span class="comp_chat_infol">{{huifu.createTime}}</span>
								</div>
								<div class="comp_chat_content">{{huifu.content}}</div>
							</div>
						</div>
					</div>
				</div>
				
				<div v-if="!replyList.length>0" class="mo_mark">未查询到工作评价</div>
			</div>
			<div v-if="showmoreList" class="remark_wrapper" >
				<!--当前公司多条评论-->
				<div class="remark_content" v-if="replyList.currentCompanyComment" v-for="item in replyList.currentCompanyComment">
					<div class="remark_info">
						<div class="remark_info_left">
							<img :src="item.facePhoto"/>
						</div>
						<div class="remark_info_content">
							<div class="remark_info_name">{{item.realName}}</div>
							<div class="remark_info_position">{{item.position}}</div>
						</div>
						<div class="remark_info_right">{{item.createTime}}</div>
					</div>
					<div class="comp_remark">
						<span class="comp_remark_head">{{item.content}}</span>
						<div v-if="item.childCommentInfoList">
							<div class="comp_chat" v-for="huifu in item.childCommentInfoList">
								<div class="comp_chat_info clearfix">
									<span class="comp_chat_infor">{{huifu.createTime}}</span>
									<span class="comp_chat_infol">{{huifu.replyPerson}}</span>
									<span class="comp_chat_infoc">回复</span>
									<span class="comp_chat_infol">{{huifu.returnedPerson}}</span>
								</div>
								<div class="comp_chat_content">{{huifu.content}}</div>
							</div>
						</div>
					</div>
				</div>
				<!--其他公司多条评论-->
				<div class="remark_content" v-if="replyList.otherCompanyComment" v-for="item in replyList.otherCompanyComment">
					<div class="remark_info" >
						<div class="remark_info_left">
							<img :src="item.facePhoto"/>
						</div>
						<div class="remark_info_content">
							<div class="remark_info_name">{{item.realName}}</div>
							<div class="remark_info_position">{{item.position}}</div>
						</div>
						<div class="remark_info_right">{{item.createTime}}</div>
					</div>
					<div class="comp_remark">
						<span class="comp_remark_head">{{item.content}}</span>
						<div v-if="item.childCommentInfoList">
							<div class="comp_chat" v-for="huifu in item.childCommentInfoList">
								<div class="comp_chat_info clearfix">
									<span class="comp_chat_infol">{{huifu.replyPerson}}</span>
									<span class="comp_chat_infoc">回复</span>
									<span class="comp_chat_infol">{{huifu.returnedPerson}}</span>
									<span class="comp_chat_infor">{{huifu.createTime}}</span>
									
								</div>
								<div class="comp_chat_content">{{huifu.content}}</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<div v-if="replyList.currentCompanyComment">
				<div v-if="!showmoreList && replyList.currentCompanyComment.length > 1" @click="_showmoreList" class="show_remark">展开职说（<span>{{replyList.currentCompanyComment.length - 1}}</span>条）</div>
				<div v-if="showmoreList" @click="_showmoreList" class="show_remark">收起评论</div>
			</div>
			<div v-if="replyList.otherCompanyComment">
				<div v-if="!showmoreList &&replyList.otherCompanyComment.length>1" @click="_showmoreList" class="show_remark">展开职说（<span>{{replyList.otherCompanyComment.length - 1}}</span>条）</div>
				<div v-if="showmoreList" @click="_showmoreList" class="show_remark">收起评论</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				listHeight: [],
        		scrollY: 0,
        		showmoreList:false,
        		num: '',
			}
		},
		props:['replyList'],
		methods:{
			_showmoreList:function(){
				this.showmoreList = !this.showmoreList;
				this.$emit('clickshow')
			}
		},
//		mounted(){
//			var that =this;
//			setTimeout(function(){
//				that.num=that.replyList.currentCompanyComment.length;
//				console.log();
//			},4000)
//			
//		}
	}
</script>

<style scoped>
	.tele_wrapper{
		border: 1px solid #EDEDED;
    	border-radius: 2px 2px 3px 3px;
	}
	.shenfen_info{
		padding: 0 17px;
	}
	.shenfen_pass{
		padding: 0 17px;
        color: #212121;
	    border-bottom: 1px solid #EDEDED;
	    font-size: 1.1rem;
	}
	.mo_mark{
		padding: 0 17px;
		height: 36px;
		line-height: 36px;
	    color: #808080;
	    font-size: 1.4rem;
	    border-bottom: 1px solid #EDEDED;
	}
	.company_name{
		display: block;
		line-height: 36px;
		font-size: 1.4rem;
	}
	.enter_name{
		display: block;
		line-height: 36px;
		font-size: 1.2rem;
		color: #808080;
	}
	.remark_content{
		padding: 30px 17px 0 17px;
		border-bottom: 1px solid #F5F5F5;
	}
	.remark_info{
		display: flex;
		height: 30px;
	}
	.remark_info_left{
		flex: 0 0 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 6px;
	}
	.remark_info_left img{
		max-height: 30px;
		max-width: 30px;
	}
	.remark_info_right{
		height: 30px;
		line-height: 12px;
		font-size: 1.2rem;
	}
	.remark_info_content{
		flex: 1;
	}
	.remark_info_name{
		line-height: 14px;
		font-size: 1.4rem;
		color: #212121;
		margin-bottom: 4px;
	}
	.remark_info_position{
		height: 12px;
		line-height: 12px;
		font-size: 1.2rem;
		color: #808080;
	}
	.remark_info_right{
		flex: 0 0 auto;
	}
	.comp_remark{
		margin-top: 14px;
		line-height: 18px;
		font-size: 1.2rem;
		color: #808080;
	}
	.comp_remark_head{
		display: inline-block;
		margin-bottom: 10px;
	}
	.comp_chat{
		padding: 9px 10px 6px 5px;
		background: #F5F5F5;
		border: 1px solid #EEEEEE;
		border-radius: 3px;
		margin-bottom: 10px;
	}
	.comp_chat_info{
		line-height: 12px;
		margin-bottom: 4px;
	}
	.comp_chat_infol{
		height: 12px;
		line-height: 1.2rem;
		font-size: 1.2rem;
		margin-right: 4px;
		color: #212121;
	}
	.comp_chat_infoc{
		height: 12px;
		line-height: 1.2rem;
		font-size: 1.2rem;
		margin-right: 4px;
		color: #808080;
	}
	.comp_chat_infor{
		height: 12px;
		line-height: 12px;
		font-size: 1rem;
		color: #808080;
	}
	.comp_chat_content{
		line-height: 17px;
		font-size: 1.2rem;
		color: #808080;
	}
	.show_remark{
		background: #F5F5F5;
		height: 30px;
		line-height: 30px;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
		color: #F89721;
	}
	.clearfix:after{
		display: block;
		height: 0;
		clear: both;
		overflow: hidden;
		visibility: hidden;
		content: '';
	}
</style>